<template>
  <div class="meida">
    <el-tabs v-model="courseSort">
      <el-tab-pane label="单视频" :name="TAB_TYPE_SINGLE">
        <search-list
          ref="mediaList"
          :api-url="$url.AssetVideoList"
          :option="searchOpt"
          :itemPerRow="8"
          :pagination="{ size: 15 }"
          @selection-change="selectionChange"
        >
          <el-table-column label="视频信息">
            <template slot-scope="scope">
              <div class="video-main">
                <img :src="scope.row.cover" v-if="scope.row.cover" class="video-cover" />
                <div>
                  <p>视频名称: {{ scope.row.title }}</p>
                  <p>视频ID: {{ scope.row.videoId }}</p>
                </div>
              </div>
            </template>
          </el-table-column>
          <!-- <el-table-column prop="completed" label="视频状态" width="80">
            <template slot-scope="scope">
              <span>
                {{ $selectFormat['videoStatusSl'](scope.row.completed).label }}
              </span>
            </template>
          </el-table-column>
          <el-table-column prop="online" label="是否上线" width="80">
            <template slot-scope="scope">
              <span>
                {{ $selectFormat['onlineSl'](scope.row.online).label }}
              </span>
            </template>
          </el-table-column>
          <el-table-column prop="platform" label="所在平台" width="80">
            <template slot-scope="scope">
              <span>
                {{ $selectFormat['videoPlatformSl'](scope.row.online).label }}
              </span>
            </template>
          </el-table-column> -->
          <el-table-column prop="createdAt" label="创建时间" width="150px"></el-table-column>
          <el-table-column prop="updatedAt" label="更新时间" width="150px"></el-table-column>
          <!-- <el-table-column label="清晰度" width="80">
        <template slot-scope="scope">
          <span>
            <el-button v-for="(stream, index) in scope.row.streams" :key="index">
              {{ $selectFormat['videoDefinitionSl'](stream.definition).label }}
            </el-button>
          </span>
        </template>
      </el-table-column> -->
          <el-table-column label="操作" width="100">
            <template slot-scope="scope">
              <div>
                <el-button type="text" @click="openFormDialog(scope.row)">管理</el-button>
              </div>
            </template>
          </el-table-column>

          <div slot="btn-after" class="btn-after">
            <el-button
              type="success"
              icon="el-icon-plus"
              @click="$router.push({ name: 'MediaUpload' })"
            >
              新增媒资
            </el-button>
            <el-button icon="el-icon-refresh" @click="$refs['mediaList'].getList()">
              刷新列表
            </el-button>
            <!-- <el-button
          type="danger"
          icon="el-icon-close"
          :disabled="scope.selectedData.length === 0"
          @click="del"
        >
          删除频道
        </el-button> -->
          </div>
        </search-list>
      </el-tab-pane>
    </el-tabs>

    <el-dialog title="修改媒资基本信息" :visible.sync="formDialogShow" width="60%">
      <el-form :model="mediaInfo" ref="mediaInfoForm">
        <el-form-item prop="cover" label="封面">
          <upload-resource
            is-public
            @upload="(cover) => (mediaInfo.cover = cover.url)"
            folder="cover"
          ></upload-resource>
        </el-form-item>
        <el-form-item prop="title" label="标题">
          <el-input v-model="mediaInfo.title"></el-input>
        </el-form-item>
        <el-form-item prop="summary" label="视频简介">
          <el-input type="textarea" v-model="mediaInfo.summary" :rows="5" resize="none"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button icon="el-icon-close" @click="dialogClose">关 闭</el-button>
        <el-button type="success" @click="saveMediaInfo" icon="el-icon-check">保 存</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
  import UploadResource from 'comp/UploadResource';

  export default {
    data() {
      return {
        searchOpt: [],
        courseSort: '',
        formDialogShow: false,
        mediaInfo: {},
      };
    },
    const: ['TAB_TYPE_SINGLE', 'TAB_TYPE_COURSE'],
    components: {
      UploadResource,
    },
    mounted() {
      this.courseSort = this.TAB_TYPE_SINGLE;
    },
    methods: {
      /**
       * 打开媒资信息浮层
       */
      openFormDialog(row) {
        this.formDialogShow = true;
        this.mediaInfo = { ...row };
      },
      /**
       * 保存媒资信息的修改
       */
      saveMediaInfo() {
        const {
          cate,
          categoryId,
          channelId,
          chapterId,
          courseId,
          id,
          kind,
          level,
          operatedAt,
          title,
        } = this.mediaInfo;

        this.$service
          .AssetVideoUpdateAttrs(
            {
              title,
              cate,
              categoryId,
              channelId,
              chapterId,
              courseId,
              kind,
              level,
              operatedAt,
              videoId: id,
            },
            JSON_HEADER,
          )
          .then((res) => {
            this.$message.success('成功了');
            this.formDialogShow = false;
            this.mediaInfo = {};
          });
      },
      /**
       * 浮层关闭
       */
      dialogClose() {
        this.mediaInfo = {};
        this.formDialogShow = false;
      },
      add() {},
      del() {},
      selectionChange() {},
      toCouseDetail() {
        // this.$tabs.open({ name: 'CourseDetail', params: {id: } });
      },
    },
  };
</script>

<style lang="less" scoped>
  .intro-preview {
    overflow: scroll;
    padding: 10px;
    background-color: #eee;
  }

  .video-main {
    display: flex;
    .video-cover {
      margin-right: 10px;
      width: 100px;
      height: 80px;
    }
  }
</style>

<style lang="less">
  .upload-model,
  #uploadDiv {
    width: 100%;
  }
</style>
